<template>
  <div>
    <table>
      <caption>
        欢迎光临_vue开发的收银系统_水果店
      </caption>
      <tr>
        <th>水果10￥/斤,折扣 8折</th>
      </tr>
      <tr>
        <td>
          请输入你要的购买的斤数 <input type="text" v-model.number="ad" />
        </td>
      </tr>
      <tr>
        <td><button @click="buy">结账买单~</button></td>
      </tr>
      <tr>
        <td>
          结账单：总价：{{ total }}￥元 折后价：{{ discont }}￥元 省了：{{
            save
          }}￥元
        </td>
      </tr>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      ad: '0',
      total: '0',
      discont: '0',
      save: '0',
    }
  },
  methods: {
    buy() {
      this.total = 10 * this.ad
      this.discont = this.total * 0.8
      this.save = this.total - this.discont
    },
  },
}
</script>

<style></style>
